<template>
    <div style="height: 100%">
        <el-container class="groupBack" style="min-height: 100vh; ">
            <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
                <div :width="sideWidth + 'px'" style="min-height: 30%;padding-top: 20px;padding-left: 20px;" >
                    <label for="check" class="bar" >
                        <input id="check" type="checkbox" @click="collapse">
                        <span class="top"></span>
                        <span class="middle"></span>
                        <span class="bottom"></span>
                    </label>
                    <div v-show="logoTextShow" style="height: 50px;width:130px;line-height: 20px;margin-left: 20px; text-align: center">
                        <b style="color:black">租户系统</b>
                    </div>
                </div>
                <el-menu :default-openeds="['2']" style="min-height: 70%; overflow-x: hidden"
                         text-color="#000"
                         active-text-color="#4198b9"
                         :collapse-transition="true"
                         :collapse="isCollapse"
                         class="el-menu-vertical-demo"
                         router
                >
                    <el-menu-item index="TenantDetail">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">主页</span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">系统管理</span>
                        </template>
                        <el-menu-item index="GroupManage">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">群组管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="ConsumerManage">
                            <template slot="title">
                                <i class="el-icon-s-custom"></i>
                                <span slot="title">用户管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="QuestionnaireManage">
                            <template slot="title">
                                <i class="el-icon-reading"></i>
                                <span slot="title">问卷管理</span>
                            </template>
                        </el-menu-item>
                    </el-submenu >
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="border-bottom: 0px solid #ccc;  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);">
                    <div style="line-height: 60px; display: flex">
                        <div style="flex: 1; font-size: 20px">
                            <!--                            <span :class="collapseBtnClass" style="cursor: pointer;font-size: 18px" @click="collapse"></span>-->
                            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px" >
                                <el-breadcrumb-item :to="{path:'/'}">登录</el-breadcrumb-item>
                                <el-breadcrumb-item>租户系统</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>

                        <el-dropdown style="width:70px; cursor: pointer">
                            <span>李四</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
                            <el-dropdown-menu slot="dropdown" style="width: 110px;text-align: center">
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                <el-dropdown-item>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>

                <el-main>
                    <!--          表示当前页面的子路由会在<router-view/>中表示-->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: "Tenant",
        data(){
            return{

                msg:"hello",
                collapseBtnClass:'el-icon-s-fold',
                isCollapse: true,
                sideWidth: 64,
                logoTextShow: false,
            }
        },
        created(){
        },
        methods: {
            collapse() {//点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false;
                } else {
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            },
        }
    }
</script>

<style scoped>
    .groupBack{
        background: url("@/views/bg.png") no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
    }
    input[type = "checkbox"] {
        -webkit-appearance: none;
        display: none;
        visibility: hidden;
    }

    .bar {
        position: relative;
        cursor: pointer;
        height: 20px;
    }

    .bar span {
        position: absolute;
        width: 22px;
        height: 3px;
        background: #fff;
        border-radius: 100px;
        display: inline-block;
        transition: 0.3s ease;
        left: 0;
    }

    .bar span.top {
        top: 0px;
    }

    .bar span.middle {
        top: 9px;
    }

    .bar span.bottom {
        top:18px
    }
    input[type]:checked ~ span.top {
        transform: rotate(45deg);
        transform-origin: top left;
        width: 25px;
        left: 5px;
    }

    input[type]:checked ~ span.bottom {
        transform: rotate(-45deg);
        transform-origin: top left;
        width: 25px;
        bottom: -1px;
        box-shadow: 0 0 10px #495057;
    }

    input[type]:checked ~ span.middle {
        transform: translateX(-20px);
        opacity: 0;
    }
</style>